<template>
  <div>
    <el-table :data="mainData" style="width: 100%">
      <el-table-column prop="projectNumber" label="项目序号" width="180" />
      <el-table-column prop="projectNumber" label="项目名称" width="180" />
      <el-table-column prop="projectAmount" label="项目金额" />
      <el-table-column prop="projectProgress" label="项目里程碑" />
      <el-table-column label="里程碑">
        <template #default="scoped">
          <div @click="openStageProgreeHandler">28%</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { createPromiseDraw } from "../../components/promise-draw/index.ts";
import ProgressReport from "./views/progress-report/index.vue";
import { useData } from "./hooks/use-data.ts";
const { mainData, loadData } = useData();

// 动态抽屉
const ProgressReportDraw = createPromiseDraw(ProgressReport, {
  title: "进度申报",
});

const openStageProgreeHandler = async () => {
  const res = await ProgressReportDraw({
    progressId: "0",
  });
};

onMounted(() => {
  loadData().then(() => {
    console.log(mainData.value, "主要数据");
  });
});
</script>

<style scoped lang="scss"></style>
